<template>
    <div>
        <!--elementui的轮播图-->
        <el-carousel :interval="4000" type="card" height="250px" class="banner">
            <el-carousel-item v-for="(item,index) in banner" :key="index">
                <img :src="item.imageUrl" alt="">
            </el-carousel-item>
        </el-carousel>
        <!--推荐歌单-->
        <div class="recommend">
            <h3 class="title">推荐歌单</h3>
            <div class="items">
                <div class="item" v-for="(item,index) in list" :key="index" @click="toPlayList(item.id)">
                    <div class="img_wrap">
                        <span class="copywriter">{{item.copywriter}}</span>
                        <img :src="item.picUrl" alt="">
                        <span></span>
                    </div>
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <!--最新歌曲-->
        <div class="newsong">
            <h3>最新音乐</h3>
            <div class="items">
                <div class="item" v-for="(item,index) in newsongs" :key="index">
                    <div class="img_wrap">
                        <img :src="item.picUrl" alt="">
                        <span class="el-icon-video-play play-but" @click="playMusic(item.id)"></span>
                    </div>
                    <div class="song_wrap">
                        <p class="song_name">{{item.name}}</p>
                        <p class="song_artist">{{item.song.artists[0].name}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!--推荐mv-->
        <div class="newMv">
            <h3>推荐MV</h3>
            <div class="items">
                <div class="item" v-for="(item,index) in mvs" :key="index">
                    <div class="img_wrap">
                        <img :src="item.picUrl" alt="" @click="toMv(item.id)">
                        <span class="play_count"><i class="el-icon-caret-right"></i>{{item.playCount}}</span>
                    </div>
                    <div class="info_wrap">
                        <p>{{item.name}}</p>
                        <p class="song_artist">{{item.artistName}}</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    //导入axios
    import axios from 'axios'
    export default {
        name: "discovery",
        data(){
            return{
                //轮播图
                banner:[],
                list:[],
                newsongs:[],
                mvs:[],
            }
        },
        created() {
            //调用轮播图接口
            axios({
                url:'https://autumnfish.cn/banner',
                method:'get',
            }).then(response=>{
                this.banner=response.data.banners;
            })
            //调用推荐歌单接口
            axios({
                url:'https://autumnfish.cn/personalized',
                method:'get',
                params:{
                    //获取的数据量
                    limit:10,
                },
            }).then(response=>{
                //console.log(response);
                this.list=response.data.result;
            })
            axios({
                url:'https://autumnfish.cn/personalized/newsong',
                method:'get',
            }).then(response=>{
                //console.log(response);
                this.newsongs=response.data.result;

            })
            axios({
                url:'https://autumnfish.cn/personalized/mv',
                method:'get',
            }).then(response=>{
                //console.log(response);
                this.mvs=response.data.result;
            })
        },
        methods:{
            playMusic(id){
                axios({
                    url:'https://autumnfish.cn/song/url',
                    method:'get',
                    params:{
                        id:id,
                    },
                }).then(response=>{
                    this.$parent.musicUrl=response.data.data[0].url;
                })
            },
            toPlayList(id){
                //传参数到PlayList
                this.$router.push(`/PlayList?id=${id}`);
            },
            toMv(id){
                //传参数到MV
                this.$router.push(`/MV?id=${id}`);
            }
        }

    }
</script>


<style scoped>
    img{
        width: 100%;
        height: 100%;
        border-radius:5px ;
    }
    .banner{
        width: 90%;
        position: relative;
        overflow: hidden;
        top:5px;
        left:5%;
    }
    .recommend{
        position: relative;
        width:90%;
        left: 5%;
    }
    .items{
        display: flex;
        flex-wrap:wrap;
    }
    .item{
        position: relative;
        width: 200px;
        margin: 10px;
        overflow: hidden;
    }
    .img_wrap{
        position: relative;
        width: 200px;
        height: 200px;
        cursor: pointer;
    }
    .copywriter{
        position: absolute;
        width: 200px;
        top:-50px;
        text-align: center;
    }
    .img_wrap:hover .copywriter{
        position: absolute;
        width: 200px;
        top:0;
        color: white;
        background-color: black;
        opacity: 0.8;
        text-align: center;
    }
    .newsong{
        position: relative;
        top:20px;
        width:90%;
        left: 5%;
    }
    .newsong .item{
        display: flex;
        position: relative;
        width: 40%;
        height: 100px;
        margin: 10px 20px;
    }
    .newsong .item:hover{
        background-color:darkgray;
        opacity: 0.8;
    }
    .newsong .img_wrap{
        width: 100px;
        height: 100px;
    }
    .newsong .song_wrap{
        position: relative;
        flex-direction: row;
        flex: 1;
        margin: 10px;
    }
    .song_artist{
        color: grey;
        font-size:15px;
        margin-top: 20px;
    }
    .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: -50px;
        left: 28px;
        font-size:50px;
        color: sandybrown;
    }
    .img_wrap:hover .play-but{
        display: block;
        position: absolute;
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 28px;
        font-size:50px;
        color: sandybrown;
    }
    .newMv{
        position: relative;
        top:40px;
        width:90%;
        left: 5%;
    }
    .newMv .item{
        width: 22%;
    }
    .newMv .img_wrap{
        width: 250px;
        height: 150px;
    }
    .newMv .info_wrap{
        text-align: center;
    }
    .newMv .song_artist{
        margin-top: 10px;
    }
    .newMv .play_count{
        background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(58,58,10,1));
        position: absolute;
        right: 0;
        color: white;
    }
    h3{
        font-weight: normal;
    }



</style>